<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei" !important;
            font-size: 14px;
            color: #999999;
            box-sizing: border-box;
        }
        .el-header {
            width: 100%;
            border-bottom: 2px solid rgb(136, 78, 34);
            margin: 0;
            padding: 0;
        }
        .el-footer{

        }
        .el-main{

        }
        a {
            color: #999999;
            font-size: 14px;
            text-decoration: none;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 234px;">
            <div style="height: 56px">
                <div class="header-top" style="background-color: #F2F2F2;padding: 6px 0;height: 32px">
                    <div style="margin: 0px 367.5px;height: 30px;line-height: 30px;">
                        <div class="lf" style="font-size: 14px;width: 202px;float:left;">
                            <p style="float: left;margin: 0">嗨，欢迎来订花乐！</p>
                            <a href="">
                                <i class="el-icon-delete" style="color: #884e22"></i>
                                <span>关注微信</span>
                            </a>
                        </div>
                        <div class="rt" style="width: 450.875px;float: right;height: 30px">
                            <a href="" style="margin-right: 16px;">你好，请登录</a>
                            <a href="" style="color: #884e22">免费注册</a>
                            <el-divider direction="vertical"></el-divider>
                            <a href="">订单查询</a>
                            <el-divider direction="vertical"></el-divider>
                            <a href=""><i class="el-icon-delete"></i><span>购物车</span><span style="color: #884e22">(0)</span></a>
                            <el-divider direction="vertical"></el-divider>
                            <a href="">手机下单</a>
                            <el-divider direction="vertical"></el-divider>
                        </div>
                    </div>
                </div>
            </div>

            <div class="header-contain" style="margin: 0 367.5px;width: 1168px;height: 174px">
                <div class="log-img" style="width: 170px ;height: 130px;margin-right: 200px;display: inline-block;overflow: hidden">
                    <img src="https://upyun.dinghuale.com/uploads/images/logo.png" alt="" style="width: 170px;height: 70px;position: relative;top: 30px">
                </div>
                <div class="center" style="width: 406.734px;height: 76px;display: inline-block;position: relative;top: -30px">
                    <div style="width: 406.73px;height: 42px">
                        <el-input placeholder="请输入内容" style="border: 1px solid #884e22">
                            <el-button slot="append" icon="el-icon-search" style="background-color:  #884e22"></el-button>
                        </el-input>
                    </div>
                    <div style="padding: 10px 0;">
                        <span>玫瑰</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>蛋糕</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>红玫瑰</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>康乃馨</span>
                        <el-divider direction="vertical"></el-divider>
                    </div>
                </div>
                <div style="display: inline-block;position: absolute;right: 100px;top: 100px">
                    <div>
                        <i class="el-icon-delete"></i>
                        <span>400-060-1520</span>
                    </div>

                </div>
            </div>
            <div class="header-bottom" style="position: relative;bottom: 0">
                <div style="width: 240px;height: 40px;margin: 0 20px 0 0;padding: 0 20px;display: inline-block"></div>
                <a href="#" style="padding: 0 20px">鲜花</a>
                <a href="#" style="padding: 0 20px">花束</a>
                <a href="#" style="padding: 0 20px">礼盒</a>
                <a href="#" style="padding: 0 20px">蛋糕</a>
                <a href="#" style="padding: 0 20px">花篮</a>
                <a href="#" style="padding: 0 20px">绿植</a>
                <a href="#" style="padding: 0 20px">周花</a>
                <a href="#" style="padding: 0 20px">圣诞节鲜花</a>
            </div>
        </el-header>
        <el-main>Main2</el-main>
        <el-footer>Footer</el-footer>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v=new Vue({
        el: '#app',
        data: function() {
            return {
                info:"elementUI"
            }
        },
        methods:{

        }
    })

</script>
</html>